<template>
  <demoBlock title="基础用法" padding class="demo-overlay">
    <vcu-button type="primary" text="显示遮罩层" @click="show = true" class="mr-10" />
    <vcu-button type="primary" text="嵌入内容" @click="showEmbedded = true" />
    <vcu-overlay :show="show" @click="show = false" />
    <vcu-overlay :show="showEmbedded" @click="showEmbedded = false">
      <div class="demo-overlay-wrapper">
        <div class="demo-overlay-block" />
      </div>
    </vcu-overlay>
  </demoBlock>
</template>

<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup() {
    const show = ref(false);
    const showEmbedded = ref(false);
    return { show, showEmbedded };
  },
});
</script>
<style lang="less" scoped>
.demo-overlay {
  .demo-overlay-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .demo-overlay-block {
    width: 320px;
    height: 220px;
    background-color: #fff;
    border-radius: 4px;
  }
}
</style>
